<template>
  <div class="nav">
    <div class="banxin flex">
      <div class="logo">
        <h1>
          <a href="#">
            <img src="../../assets/images/indexLogo.png" alt="" />
          </a>
        </h1>
      </div>
      <ul class="nav-bar flex">
        <li
          :class="{ active: item.reg.test($route.path) }"
          v-for="item in list"
          :key="item.id"
          @click="$router.push(item.path)"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
      <div class="search-bar flex">
        <input @keyup.enter="search" type="text" placeholder="搜索商品" v-model="keyword" />
        <span @click="search"><img src="../../assets/images/search.png" alt="" /></span>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      keyword:'',
      list: [
        { id: 1, name: "首页", path: "/home",reg:/\/home/ },
        { id: 2, name: "全部商品", path: "/allgoods",reg:/\/allgoods/ },
        { id: 3, name: "个人中心", path: "/personal",reg:/\/personal/ },
        { id: 4, name: "我的订单", path: "/myorders",reg:/\/myorders/ },
        { id: 5, name: "专属福利", path: "/frees",reg:/\/frees/ },
      ],
    };
  },
  methods: {
    search(){
      this.$router.push(`/allgoods?keyword=${this.keyword}`)
    }
  },
};
</script>
 
<style lang = "less" scoped>
.nav {
  .banxin {
    justify-content: space-between;
    margin-top: 14px;
    margin-bottom: 20px;
  }
  ul li {
    cursor: pointer;
    font-weight: 600;
    padding: 0 20px;
    margin-top: 36px;
    font-size: 16px;
    &.active {
      color: #0a328e;
    }
  }
  .search-bar {
    margin-top: 20px;
    input {
      width: 214px;
      height: 40px;
      border: 1px solid #dedede;
      border-radius: 20px 0px 0px 20px;

      padding-left: 16px;
      box-sizing: border-box;
    }
    span {
      width: 50px;
      height: 40px;
      line-height: 40px;
      background: #0a328e;
      border-radius: 0px 20px 20px 0px;
      text-align: center;
    }
  }
}
</style>